<template>
    <div>

        <div v-infinite-scroll="moreList"
            infinite-scroll-disabled="loading"
            infinite-scroll-immediate-check = "true"
            infinite-scroll-distance="100">
            <div class="other_item" v-for="item in transaction" >
                <div class="otherTit">{{item.msgTiTle}}</div>
                <div class="otherCon" v-html="item.msgContent">
                   <!-- {{item.msgContent}}-->
                </div>
                <div v-show="item.msgTiTle=='芸券用户绑定'" class="otherBtn">
                    <a class="otherSub" @click="otherEvent(1,item.msgId)">拒绝</a>
                    <a class="otherMain" @click="otherEvent(0,item.msgId)">授权</a>
                </div>
                <!-- 授权状态 -->
                <div v-show="!(item.msgTiTle=='反馈处理')&&!(item.msgTiTle=='发货消息')" :class="item.msgTiTle=='已授权'?'status_box':'status_box bgcc'">
                    <span v-show="item.msgTiTle=='芸券用户绑定'">未授权</span>
                    <span v-show="item.msgTiTle=='已授权'">已授权</span>
                    <span v-show="item.msgTiTle=='已拒绝'">已拒绝</span>
                </div>
            </div>
        </div>
        <div class="loading-box" v-if="moreInfo">
            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>
        </div>
        <div class="lastInfoMore" v-if="!moreInfo" v-show="transaction.length>transactionLimit">没有更多</div>
    </div>
</template>
<script>
    import header from '../../componentes/global/header.vue'
    import * as types from '../../vuex/types.js'
    import getData from '../../service/getData.js'
    import listLoading from '../../componentes/global/listLoading.vue'
    import { mapState } from 'vuex'
    import { Toast,Indicator} from 'mint-ui'
    export default {
        data(){
            return{
                loading:true,
                noMoreCoupon:true,
                moreInfo:true
            }
        },
        created:function(){
            this.$store.commit(types.transaction_info);
            this.$store.commit(types.transaction_page,1);
            this.$store.commit(types.GET_SCORLL_STATUS,true);
            this.clickMoreList();
        },
        components: {
            'v-header': header,
            listLoading
        },
        computed:{
            ...mapState({
                transaction:state => state.info.transaction,
                    transactionLimit:state => state.info.transactionLimit,
                    userInfo:state => state.user.userInfo
            }),
            routeInfo:function(){
                return this.$route.params.type
            }
        },
        mounted:function () {
            this.$nextTick(function () {
                this.$store.commit(types.HEAD_TEXT, "消息中心");
                this.$store.commit(types.HEAD_BACK_ICON, true);
                this.$store.commit(types.HEAD_MES_ICON, false);
            })
        },
        methods:{
            clickMoreList:function(){
                if(!this.noMoreCoupon){//防止重复点击
                    return
                }
                let me = this;
                this.noMoreCoupon = false;
                this.$store.dispatch("getInfoList",{'method':'post',data:{type:me.$route.params.type}}).then(rep => {
                    if(rep.content.list){
                        if(rep.content.list.length < me.transactionLimit){
                            setTimeout(function(){me.noMoreCoupon = true;},300);
                            me.moreInfo=false
                        }
                        if(rep.content.list.length == me.transactionLimit){//如果列表数据够10条，开启下拉加载
                            me.moreInfo=true;
                            me.loading = false;
                            me.noMoreCoupon = false;
                        }
                    }else{
                        setTimeout(function(){me.noMoreCoupon = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreCoupon = true;},300);
                });
            },
            moreList:function(){
                this.loading = true;
                this.noMoreCoupon = true;
                this.clickMoreList();
            },
            otherEvent(type,msgId){
                let me = this;
//              getData.otherOK(me.userInfo.usrId,type,msgId).then(rep =>{
                getData.otherOK({method:'post',data:{ret:type,msgId:msgId}},me.userInfo.usrId).then(rep =>{
                    if(rep.respCode == '00'){
                        Toast({
                            message: '操作成功',
                            duration: 1000
                        });
                    }else{
                        Toast({
                            message: rep.errorInfo,
                            duration: 1000
                        });
                    };
                    location.reload()
//                  this.$store.commit(types.transaction_info);
//                  this.$store.commit(types.transaction_page,1);
//                  this.clickMoreList();
                })
            }
        }
    }
</script>
<style>
    .otherTit{height: 3rem;line-height: 3rem;color:#333;padding: 0 .667rem;margin-top: 1rem;font-size:1.2rem;font-weight: bold;}
    .otherCon{padding:0 0.667rem 0.667rem;line-height: 1.6rem;color:#666;font-size: 1rem}
    .otherBtn{padding: 0 .667rem 1rem; overflow: hidden;}
    .otherBtn a{float: left;height: 2.4rem;line-height: 2.4rem;text-align:center;border:1px solid #ec4e8a;color:#ec4e8a;border-radius: .2rem;width:-webkit-calc(50% - .5rem);}
    .otherBtn a:last-child{margin-left: 1rem;background: #ec4e8a;color:#fff;}
    .other_item{background-color: #fff;overflow: hidden;margin-top: 0.667rem;position: relative;}
    .status_box{position: absolute;right: -7.67rem;top: -15.67rem;width: 18.3rem;height: 18.3rem;background-color: #ee5088;color:#fff;border-radius: 50%}
    .bgcc{background-color: #ccc;}
    .status_box span{position: absolute;bottom:0.667rem;left:45%;transform: translateX(-50%);font-size: 1.2rem}
</style>
